<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="工单列表" data-page-identification="c_ywr6oo0s9g">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_56q5auz3n0 自定义模板_9naw5vucd4 -->
      <!--          新建/编辑工单-->
      <a-modal
        centered
        v-model:visible="state.addOrEditVisible"
        :title="state.modalTitle"
        @ok="submit"
        @cancel="fatherCancel"
        width="1000px"
        destroy-on-close
        :ok-button-props="{ loading: state.fatherLoading }"
      >
        <div class="form-content">
          <a-form :model="state.modalForm" ref="formRef">
            <a-row>
              <a-col :span="24">
                <a-form-item label="工单标题" :rules="[{ required: true, message: '请输入工单标题', trigger: 'blur' }]" name="content">
                  <a-textarea maxlength="100" show-count placeholder="请输入" v-model:value="state.modalForm.content" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="工单类型" :rules="[{ required: true, message: '请选择工单类型', trigger: 'blur' }]" name="type">
                  <a-select
                    :options="[
                                            {
                                                label: '产品问题',
                                                value: '产品问题'
                                            },
                                            {
                                                label: '数据问题',
                                                value: '数据问题'
                                            },
                                            {
                                                label: '算法问题',
                                                value: '算法问题'
                                            },
                                            {
                                                label: '系统故障',
                                                value: '系统故障'
                                            },
                                            {
                                                label: '产品需求',
                                                value: '产品需求'
                                            },
                                            {
                                                label: '算法需求',
                                                value: '算法需求'
                                            }
                                        ]"
                    v-model:value="state.modalForm.type"
                    placeholder="请选择"
                    @change="hanldeTypeChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="优先级" :rules="[{ required: true, message: '请选择优先级', trigger: 'blur' }]" name="priority">
                  <a-select
                    :disabled="state.modalForm.type === '产品需求'"
                    v-model:value="state.modalForm.priority"
                    :options="[
                                            {
                                                label: 'p0',
                                                value: 'p0'
                                            },
                                            {
                                                label: 'p1',
                                                value: 'p1'
                                            },
                                            {
                                                label: 'p2',
                                                value: 'p2'
                                            },
                                            {
                                                label: 'p3',
                                                value: 'p3'
                                            }
                                        ]"
                    placeholder="请选择"
                    @change="getSolveTimeByType"
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row>
              <a-col :span="12" v-if="state.modalForm.type !== '产品需求'">
                <a-form-item
                  label="计划解决时长(小时)"
                  :rules="[
                                        {
                                            pattern: new RegExp(/^(0(\.5)?|[1-9](\d*)?(\.5)?(\.0)?)$/),
                                            message: '请输入大于0的数字(支持0.5的倍数)',
                                            trigger: 'blur'
                                        }
                                    ]"
                  name="workHours"
                >
                  <a-input-number placeholder="请输入" v-model:value="state.modalForm.workHours" @change="getSolveTime" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="计划解决时间" :rules="[{ required: true, message: '请选择计划解决时间', trigger: 'blur' }]" name="endTime">
                  <a-date-picker show-time placeholder="请选择" v-model:value="state.modalForm.endTime" value-format="YYYY-MM-DD HH:mm:ss" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="问题来源" :rules="[{ required: true, message: '请选择问题来源', trigger: 'blur' }]" name="questionSource">
                  <a-select
                    v-model:value="state.modalForm.questionSource"
                    :options="[
                                            {
                                                label: '400',
                                                value: '400'
                                            },
                                            {
                                                label: '现场反馈',
                                                value: '现场反馈'
                                            },
                                            {
                                                label: '系统自检',
                                                value: '系统自检'
                                            }
                                        ]"
                    placeholder="请选择"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="所属区域" :rules="[{ required: true, message: '请选择所属区域', trigger: 'blur' }]" name="areaCode">
                  <a-select
                    allow-clear
                    show-search
                    :options="state.areaList"
                    placeholder="请选择"
                    v-model:value="state.modalForm.areaCode"
                    @focus="getAreaList"
                    :field-names="{ label: 'label', value: 'value' }"
                    :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                    @change="areaChange"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="所属客户" :rules="[{ required: true, message: '请输入所属客户', trigger: 'blur' }]" name="customer">
                  <a-select
                    allow-clear
                    show-search
                    :options="state.customList"
                    placeholder="请选择"
                    v-model:value="state.modalForm.customer"
                    @focus="getCustomerList"
                    :field-names="{ label: 'name', value: 'name' }"
                    :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                    @change="customerChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="所属项目" :rules="[{ required: true, message: '请选择所属项目', trigger: 'blur' }]" name="projectId">
                  <a-select
                    allow-clear
                    show-search
                    :options="state.projectList"
                    placeholder="请选择"
                    v-model:value="state.modalForm.projectId"
                    :field-names="{ label: 'projectName', value: 'projectId' }"
                    :filter-option="
                                            (input, option) => {
                                                return (
                                                    option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                )
                                            }
                                        "
                    @focus="getProjectList"
                    @change="projectChange"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="环境" :rules="[{ required: true, message: '请选择环境', trigger: 'blur' }]" name="environment">
                  <a-select
                    show-search
                    allow-clear
                    :options="state.environmentList"
                    placeholder="请选择"
                    v-model:value="state.modalForm.environment"
                    :field-names="{ label: 'name', value: 'name' }"
                    :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                    @focus="getEnvironmentList"
                    @change="environmentChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="所属产品" :rules="[{ required: true, message: '请选择所属产品', trigger: 'blur' }]" name="production">
                  <a-select
                    show-search
                    allow-clear
                    :options="state.productList"
                    placeholder="请选择"
                    v-model:value="state.modalForm.production"
                    @change="productChange"
                    @focus="getProductList"
                    :field-names="{ label: 'name', value: 'name' }"
                    :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="版本">
                  <a-input v-model:value="state.modalForm.version" disabled />
                </a-form-item>
              </a-col>
            </a-row>
            <div class="description-tip" v-if="currentData.status !== '未开始' && currentData.status"><ExclamationCircleFilled class="tip-img" /> 解决中的工单不支持编辑问题描述</div>
            <a-row
              :style="{
                                pointerEvents:
                                    currentData.status === '未开始' ||
                                    !currentData.status ||
                                    currentData.status === '待分发'
                                        ? 'auto'
                                        : 'none'
                            }"
            >
              <a-col :span="24">
                <a-form-item label="问题描述" :rules="[{ required: true, message: '请输入问题描述', trigger: 'blur' }]" name="qillData">
                  <QuillEditor v-model:content="state.modalForm.qillData" ref="quillEditor" :options="editorOption" class="quill-editor" />
                </a-form-item>
              </a-col>
            </a-row>
            <!--                        <a-row>-->
            <!--                            <a-col :span="24">-->
            <!--                                <a-form-item-->
            <!--                                    label="解决人"-->
            <!--                                    :rules="[{ required: true, message: '请选择解决人', trigger: 'blur' }]"-->
            <!--                                    name="solverList"-->
            <!--                                >-->
            <!--                                    <a-select-->
            <!--                                        class="remove-icon"-->
            <!--                                        show-search-->
            <!--                                        mode="multiple"-->
            <!--                                        :options="state.allUser"-->
            <!--                                        v-model:value="state.modalForm.solverList"-->
            <!--                                        placeholder="请选择"-->
            <!--                                        :field-names="{ label: 'name', value: 'name' }"-->
            <!--                                        :filter-option="-->
            <!--                                            (input, option) => {-->
            <!--                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0-->
            <!--                                            }-->
            <!--                                        "-->
            <!--                                        @change="fatherSolverChange"-->
            <!--                                    />-->
            <!--                                </a-form-item>-->
            <!--                            </a-col>-->
            <!--                        </a-row>-->
            <!--                        &lt;!&ndash;                      <a-col v-if="taskPeopleList.length > 0">&ndash;&gt;-->
            <!--                        <a-col>-->
            <!--                            <div style="width: 700px; margin-left: 135px; margin-bottom: 16px">-->
            <!--                                <a-->
            <!--                                    href="javascript:;"-->
            <!--                                    v-for="(item, num) in taskPeopleList"-->
            <!--                                    @click="handlerAddPeople(item.value, index)"-->
            <!--                                    ><span style="margin: 0 5px">{{ item.value }}</span></a-->
            <!--                                >-->
            <!--                            </div>-->
            <!--                        </a-col>-->
            <a-col :span="24">
              <a-form-item label="上传附件">
                <a-upload
                  v-model:file-list="state.modalForm.descriptionAttachmentList"
                  :multiple="true"
                  :before-upload="handlerFatherUpload"
                  @remove="handlerFatherRemove"
                  accept=".xlsx, image/*,.docx,, .xls,.mp4"
                >
                  <a-button type="primary">
                    <upload-outlined />
                    上传
                  </a-button>
                </a-upload>
                <span>支持格式：.xlsx, image/*,.docx,, .xls,.mp4</span>
              </a-form-item>
            </a-col>
          </a-form>
        </div>
      </a-modal>
      <!--          新建/编辑工单-->
      <!--          编辑子工单-->
      <a-modal centered v-model:visible="state.editSonVisible" title="编辑子工单" @ok="submitSon" width="1000px" :ok-button-props="{ loading: state.sonLoading }">
        <div class="form-content">
          <a-form :model="state.sonForm" ref="sonRef">
            <a-row>
              <a-col :span="24">
                <a-form-item label="工单标题" :rules="[{ required: true, message: '请输入工单标题', trigger: 'blur' }]" name="content">
                  <a-input maxlength="100" show-count placeholder="请输入" v-model:value="state.sonForm.content" />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row>
              <a-col :span="24">
                <a-form-item label="计划解决时间" :rules="[{ required: false, message: '请选择计划解决时间', trigger: 'blur' }]" name="endTime">
                  <a-date-picker show-time placeholder="请选择" v-model:value="state.sonForm.endTime" value-format="YYYY-MM-DD HH:mm:ss" />
                </a-form-item>
              </a-col>
              <!--                            <a-col :span="24">-->
              <!--                                <a-form-item-->
              <!--                                    label="解决人"-->
              <!--                                    :rules="[{ required: true, message: '请选择解决人', trigger: 'blur' }]"-->
              <!--                                    name="solverList"-->
              <!--                                >-->
              <!--                                    <a-select-->
              <!--                                        class="remove-icon"-->
              <!--                                        show-search-->
              <!--                                        allow-clear-->
              <!--                                        mode="multiple"-->
              <!--                                        :options="state.allUser"-->
              <!--                                        v-model:value="state.sonForm.solverList"-->
              <!--                                        placeholder="请选择"-->
              <!--                                        :field-names="{ label: 'name', value: 'name' }"-->
              <!--                                        :filter-option="-->
              <!--                                            (input, option) => {-->
              <!--                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0-->
              <!--                                            }-->
              <!--                                        "-->
              <!--                                        @change="sonSolverChange"-->
              <!--                                    />-->
              <!--                                </a-form-item>-->
              <!--                            </a-col>-->
            </a-row>
            <!--                        <a-col>-->
            <!--                            <div style="width: 700px; margin-left: 115px; margin-bottom: 16px">-->
            <!--                                <a-->
            <!--                                    href="javascript:;"-->
            <!--                                    v-for="(item, num) in taskPeopleList"-->
            <!--                                    @click="handlerAddSonPeople(item.value, index)"-->
            <!--                                    ><span style="margin: 0 5px">{{ item.value }}</span></a-->
            <!--                                >-->
            <!--                            </div>-->
            <!--                        </a-col>-->
            <div class="description-tip" v-if="currentData.status !== '未开始' && currentData.status"><ExclamationCircleFilled class="tip-img" /> 解决中的工单不支持编辑问题描述</div>
            <a-row>
              <a-col
                :span="24"
                :style="{
                                    pointerEvents:
                                        currentData.status === '未开始' ||
                                        !currentData.status ||
                                        currentData.status === '待分发'
                                            ? 'auto'
                                            : 'none'
                                }"
              >
                <a-form-item label="问题描述" :rules="[{ required: true, message: '请输入问题描述', trigger: 'blur' }]" name="quillData">
                  <QuillEditor ref="sonQuillRef" v-model:content="state.sonForm.quillData" :options="editorOption" class="quill-editor" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-col :span="24">
              <a-form-item label="上传附件">
                <a-upload
                  v-model:file-list="state.sonForm.descriptionAttachmentList"
                  :multiple="true"
                  :before-upload="handlerSonUpload"
                  @remove="handlerSonRemove"
                  accept=".xlsx, image/*,.docx,, .xls,.mp4"
                >
                  <a-button type="primary">
                    <upload-outlined />
                    上传
                  </a-button>
                </a-upload>
                <span>支持格式：.xlsx, image/*,.docx,, .xls,.mp4</span>
              </a-form-item>
            </a-col>
          </a-form>
        </div>
      </a-modal>
      <!--          编辑子工单-->

      <!--          流转变更-->
      <a-modal
        centered
        v-model:visible="newState.circulationVisible"
        title="流转"
        width="520px"
        @ok="confirmCirculation"
        destroy-on-close
        :body-style="{
                    paddingBottom: 0
                }"
        :ok-button-props="{
                    loading: newState.changeStatusLoading
                }"
        @cancel="cancelCirculation"
      >
        <div class="change-status">
          <a-form :model="newState.circulationForm" ref="circulationFormRef">
            <a-row>
              <a-col :span="24">
                <a-form-item label="解决人" :rules="[{ required: true, message: '请选择解决人', trigger: 'blur' }]" name="solverList">
                  <a-select
                    class="remove-icon"
                    show-search
                    :allow-clear="false"
                    mode="multiple"
                    :options="state.allUser"
                    v-model:value="newState.circulationForm.solverList"
                    placeholder="请选择"
                    :field-names="{ label: 'name', value: 'name' }"
                    :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                    @change="changeStatusSolverChange"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-modal>
      <!--          流转变更-->
      <!--          解决中变更-->
      <a-modal
        centered
        v-model:visible="newState.resolvingVisible"
        title="解决中"
        width="1000px"
        @ok="confirmResolving"
        destroy-on-close
        :body-style="{
                    paddingBottom: 0
                }"
        :ok-button-props="{
                    loading: newState.changeStatusLoading
                }"
        @cancel="cancelResolving"
      >
        <div class="change-status">
          <a-form :model="newState.resolvingForm" ref="resolvingFormRef">
            <a-row>
              <a-col :span="24">
                <a-form-item label="解决方案概述" :rules="[{ required: true, message: '请输入解决方案概述', trigger: 'blur' }]" name="solution">
                  <a-textarea v-model:value="newState.resolvingForm.solution" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-item label="解决方案详述">
                  <QuillEditor ref="resolvingQuillRef" :options="editorOption" class="quill-editor" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-modal>
      <!--          解决中变更-->
      <!--          已解决变更-->
      <a-modal
        centered
        v-model:visible="newState.resolvedVisible"
        title="已解决"
        width="1000px"
        :body-style="{
                    paddingBottom: 0
                }"
        @ok="confirmResolved"
        destroy-on-close
        :ok-button-props="{
                    loading: newState.changeStatusLoading
                }"
        @cancel="cancelResolved"
      >
        <div class="change-status">
          <a-form :model="newState.resolvedForm" ref="resolvedFormRef">
            <a-row>
              <a-col :span="24">
                <a-form-item label="解决方案概述" :rules="[{ required: true, message: '请输入解决方案概述', trigger: 'blur' }]" name="solution">
                  <a-textarea v-model:value="newState.resolvedForm.solution" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-item label="解决方案详述"> <QuillEditor ref="resolvedQuillRef" :options="editorOption" class="quill-editor" /></a-form-item>
              </a-col>
            </a-row>
            <a-col :span="24">
              <a-form-item label="上传附件">
                <a-upload
                  v-model:file-list="newState.resolvedForm.attachmentList"
                  :multiple="true"
                  :before-upload="handlerResolvedUpload"
                  @remove="handlerResolvedRemove"
                  accept=".xlsx, image/*,.docx,, .xls,.mp4"
                >
                  <a-button type="primary">
                    <upload-outlined />
                    上传
                  </a-button>
                </a-upload>
                <span>支持格式：.xlsx, image/*,.docx,, .xls,.mp4</span></a-form-item
              >
            </a-col>
          </a-form>
        </div>
      </a-modal>
      <!--          已解决变更-->

      <!--          删除-->
      <a-modal centered v-model:visible="state.deleteVisible" title="删除" @ok="handleDelete" :ok-button-props="{ loading: state.deleteLoading }">
        请确认是否删除该工单任务，如该工单建立了子工单请先对子工单进行解决后在进行删除操作。
      </a-modal>
      <!--          删除-->
      <div class="top-search">
        <div class="top-left">
          <a-form :model="state.filter">
            <a-row justify="space-between">
              <a-col :span="5">
                <a-form-item label="工单类型" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                  <a-select
                    v-model:value="state.filter.type"
                    :options="[
                                            {
                                                label: '产品问题',
                                                value: '产品问题'
                                            },
                                            {
                                                label: '数据问题',
                                                value: '数据问题'
                                            },
                                            {
                                                label: '算法问题',
                                                value: '算法问题'
                                            },
                                            {
                                                label: '系统故障',
                                                value: '系统故障'
                                            },
                                            {
                                                label: '产品需求',
                                                value: '产品需求'
                                            },
                                            {
                                                label: '算法需求',
                                                value: '算法需求'
                                            }
                                        ]"
                    show-search
                    allow-clear
                    placeholder="请选择"
                    :field-names="{ label: 'label', value: 'value' }"
                    :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
              <a-col :span="5">
                <a-form-item label="优先级" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                  <a-select
                    v-model:value="state.filter.priority"
                    :options="[
                                            {
                                                label: 'p0',
                                                value: 'p0'
                                            },
                                            {
                                                label: 'p1',
                                                value: 'p1'
                                            },
                                            {
                                                label: 'p2',
                                                value: 'p2'
                                            },
                                            {
                                                label: 'p3',
                                                value: 'p3'
                                            }
                                        ]"
                    allow-clear
                    placeholder="请选择"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="5">
                <a-form-item label="问题来源" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                  <a-select
                    v-model:value="state.filter.questionSource"
                    :options="[
                                            {
                                                label: '400',
                                                value: '400'
                                            },
                                            {
                                                label: '现场反馈',
                                                value: '现场反馈'
                                            },
                                            {
                                                label: '系统自检',
                                                value: '系统自检'
                                            }
                                        ]"
                    show-search
                    allow-clear
                    placeholder="请选择"
                    :field-names="{ label: 'label', value: 'value' }"
                    :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
              <!--                            <a-col :span="5">-->
              <!--                                <a-form-item label="工单状态" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">-->
              <!--                                    <a-select-->
              <!--                                        v-model:value="state.filter.status"-->
              <!--                                        :options="state.statusList"-->
              <!--                                        show-search-->
              <!--                                        allow-clear-->
              <!--                                        placeholder="请选择"-->
              <!--                                        :field-names="{ label: 'label', value: 'value' }"-->
              <!--                                        :filterOption="-->
              <!--                                            (input, option) => {-->
              <!--                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0-->
              <!--                                            }-->
              <!--                                        "-->
              <!--                                    />-->
              <!--                                </a-form-item>-->
              <!--                            </a-col>-->
              <a-col :span="5">
                <a-form-item label="是否超时" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                  <a-select
                    v-model:value="state.filter.timeout"
                    :options="[
                                            {
                                                label: '是',
                                                value: '是'
                                            },
                                            {
                                                label: '否',
                                                value: '否'
                                            }
                                        ]"
                    show-search
                    allow-clear
                    placeholder="请选择"
                    :field-names="{ label: 'label', value: 'value' }"
                    :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="项目" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                  <a-tree-select
                    v-model:value="state.filter.factoryCode"
                    show-search
                    style="width: 100%"
                    placeholder="请选择"
                    allow-clear
                    :tree-data="state.treeData"
                    :fieldNames="{
                                            children: 'children',
                                            label: 'nodeName',
                                            value: 'nodeCode',
                                            key: 'nodeCode'
                                        }"
                    :filterTreeNode="
                                            (inputValue, treeNode) => {
                                                return (
                                                    treeNode.nodeName.toLowerCase().indexOf(inputValue.toLowerCase()) >=
                                                    0
                                                )
                                            }
                                        "
                    :max-tag-count="1"
                    @focus="getTreeData"
                    @change="handleTreeChange"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row justify="space-between">
              <a-col :span="5">
                <a-form-item label="产品" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                  <a-select
                    show-search
                    v-model:value="state.filter.production"
                    :options="state.productList"
                    allow-clear
                    placeholder="请选择"
                    @focus="getProductList"
                    :field-names="{ label: 'name', value: 'name' }"
                    :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
              <a-col :span="5">
                <a-form-item label="环境" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                  <a-select
                    v-model:value="state.filter.environment"
                    :options="state.searchEnvironmentList"
                    show-search
                    allow-clear
                    placeholder="请选择"
                    :field-names="{ label: 'name', value: 'name' }"
                    :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                    @focus="getSearchEnvironmentList"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="5">
                <a-form-item label="创建时间" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                  <a-range-picker v-model:value="state.filter.createdTimeList" value-format="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
              <a-col :span="5">
                <a-form-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" label="创建人">
                  <a-select
                    show-search
                    allow-clear
                    :options="state.allUser"
                    v-model:value="state.filter.createdByName"
                    placeholder="请选择"
                    :field-names="{ label: 'name', value: 'name' }"
                    :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" label="解决人">
                  <a-select
                    show-search
                    allow-clear
                    :options="state.allUser"
                    v-model:value="state.filter.solverName"
                    placeholder="请选择"
                    :field-names="{ label: 'name', value: 'name' }"
                    :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <!--                        <a-row justify="space-between">-->
            <a-row>
              <a-col :span="5">
                <a-form-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" label="项目经理">
                  <a-select
                    show-search
                    allow-clear
                    :options="state.pmNameList"
                    v-model:value="state.filter.pmName"
                    placeholder="请选择"
                    :field-names="{ label: 'label', value: 'label' }"
                    :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
              <a-col :span="5">
                <a-form-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" label="PMO">
                  <a-select
                    show-search
                    allow-clear
                    :options="state.pmoList"
                    v-model:value="state.filter.pmoName"
                    placeholder="请选择"
                    :field-names="{ label: 'label', value: 'label' }"
                    :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>

              <a-col :span="5">
                <a-form-item label="工单标题" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                  <a-input placeholder="请输入" v-model:value="state.filter.keyWords" />
                </a-form-item>
              </a-col>
              <a-col :span="5">
                <a-form-item label="工单编号" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                  <a-input placeholder="请输入" v-model:value="state.filter.number" />
                </a-form-item>
              </a-col>
              <a-col :span="4" style="display: flex; justify-content: end; align-items: start">
                <a-space>
                  <a-button type="primary" @click="getData(true)">查询</a-button>
                  <a-button type="primary" ghost @click="resetData">重置</a-button>
                </a-space>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
      <div class="main">
        <a-spin v-model:spinning="dataLoading" tip="加载中">
          <a-tabs v-model:activeKey="state.filter.status" @change="getData">
            <a-tab-pane key="" tab="全部工单" />
            <a-tab-pane key="待分发" tab="待分发" />
            <a-tab-pane key="未开始" tab="未开始" />
            <a-tab-pane key="解决中" tab="解决中" />
            <a-tab-pane key="已解决" tab="已解决" />
            <a-tab-pane key="已关闭" tab="已关闭" />
            <a-tab-pane key="已回访" tab="已回访" />
          </a-tabs>
          <div class="main-title">
            <div class="top-tip"><ExclamationCircleFilled class="tip-img" /> 解决人接收流转的工单后，如距离计划解决时间较近，请及时联系创建人编辑调整，避免工单延期对自己造成影响</div>
            <a-space>
              <a-form-item label="排序" style="margin: 0">
                <a-select style="width: 150px" :options="state.sortList" v-model:value="state.sort" @change="getData" allow-clear />
              </a-form-item>
              <a-button type="primary" @click="handleAdd">新建</a-button>
              <a-button type="primary" @click="handleExpandAll" v-if="!newState.isExpandAll">全部展开</a-button>
              <a-button type="primary" @click="handleCollapseAll" v-else>全部折叠</a-button>
            </a-space>
          </div>
          <div class="gd-scroll">
            <div class="gd-item" v-for="(item, index) in state.dataList">
              <a-collapse :bordered="false" expandIconPosition="right" v-model:activeKey="state.collapseKey" collapsible="disabled">
                <template #expandIcon="{ isActive }"> </template>
                <a-collapse-panel :key="item.id">
                  <template #header>
                    <div class="collapse-title" :style="getTitleStyle(item.status)">
                      <div class="timeout" v-if="item.timeout === '是'">已超时</div>
                      <div class="collapse-title-left">
                        <div v-if="/(p0|P0)/i.test(item.priority)" class="ceycle0">P0</div>
                        <div v-if="/(p1|P1)/i.test(item.priority)" class="ceycle1">P1</div>
                        <div v-if="/(p2|P2)/i.test(item.priority)" class="ceycle2">P2</div>
                        <div v-if="/(p3|P3)/i.test(item.priority)" class="ceycle3">P3</div>
                        <div v-if="item.questionSource === '400'" class="ph-icon">400</div>
                        <div v-if="item.questionSource === '现场反馈'" class="xc-icon">现场反馈</div>
                        <div v-if="item.questionSource === '系统自检'" class="zj-icon">系统自检</div>
                      </div>
                      <div class="father-right"
                        ><div class="father-title" :title="item.content">
                          <span
                            style="
                                                            border-right: 1px solid #d9d9d9;
                                                            padding-right: 8px;
                                                            margin-right: 5px;
                                                        "
                          >
                            {{ item.factoyName }}</span
                          >
                          {{ item.content }}
                        </div>
                        <div class="father-bottom" @click.stop="onClick">
                          <div class="father-bottom-left">
                            <div class="border-div">
                              <span class="collapse-title-font">创建人：</span>
                              <span class="collapse-content-font">{{
                                                                item.createdBy
                              }}</span>
                              <div class="border-line"></div>
                            </div>

                            <div class="border-div max-length">
                              <span class="collapse-title-font">解决人：</span>
                              <span class="collapse-content-font" :title="item.solver">{{
                                                                item.solver
                              }}</span>
                            </div>
                            <div class="border-div">
                              <div
                                style="
                                                                    position: absolute;
                                                                    width: 1px;
                                                                    height: 14px;
                                                                    background-color: #a5a6a7;
                                                                    left: -8px;
                                                                    top: 50%;
                                                                    transform: translate(-50%, -50%);
                                                                "
                              ></div>
                              <span class="collapse-title-font">解决进度：</span>
                              <span class="collapse-content-font">{{
                                                                item.progress
                              }}</span>
                              <div class="border-line"></div>
                            </div>
                            <div class="border-div">
                              <span class="collapse-title-font">创建时间：</span>
                              <span class="collapse-content-font">{{
                                                                item.createdTime
                              }}</span>
                              <div class="border-line"></div>
                            </div>
                            <div class="border-div">
                              <span class="collapse-title-font">工单类型：</span>
                              <span class="collapse-content-font">{{ item.type }}</span>
                              <div class="border-line"></div>
                            </div>
                            <div class="border-div">
                              <span class="collapse-title-font">状态：</span>
                              <span class="collapse-content-font" :style="getColorStyle(item.status)">{{ item.status }}</span>
                            </div>
                          </div>
                          <div class="father-right-btn">
                            <a-button type="primary" ghost size="small" class="btn-item" @click="showCirculation(item)" :disabled="isCirculationDisabled(item)">流转 </a-button>
                            <template v-if="['已解决', '已关闭', '已回访'].includes(item.status)">
                              <a-popconfirm title="请确认是否重新打开工单？" @confirm="handlerReOpen(item)">
                                <a-button type="primary" ghost size="small" class="btn-item">重新打开</a-button>
                              </a-popconfirm>
                            </template>

                            <template v-else>
                              <a-button type="primary" ghost size="small" class="btn-item" @click="showResolving(item)" :disabled="isResolvingDisabled(item)">解决中</a-button>
                            </template>
                            <a-button type="primary" ghost size="small" class="btn-item" @click="showResolved(item)" :disabled="isResolvedDisabled(item)">已解决 </a-button>
                            <a-popconfirm title="请确认是否关闭工单？" :disabled="isCloseDisabled(item)" @confirm="handlerClose(item)">
                              <a-button type="primary" ghost size="small" class="btn-item" :disabled="isCloseDisabled(item)">关闭 </a-button>
                            </a-popconfirm>
                            <a-popconfirm title="请确认是否已回访工单？" @confirm="handleReturnVisit(item)" :disabled="isReturnVisitDisabled(item)">
                              <a-button type="primary" ghost size="small" class="btn-item" :disabled="isReturnVisitDisabled(item)">已回访 </a-button>
                            </a-popconfirm>

                            <a-button type="primary" ghost size="small" class="btn-item" @click="handleDetail(item.id)">详情 </a-button>
                            <a-button type="primary" ghost size="small" class="btn-item" @click="handleEdit(item)" :disabled="!item.myCreated">编辑 </a-button>
                            <a-button
                              type="primary"
                              ghost
                              size="small"
                              class="btn-item"
                              @click="toDelete(item)"
                              :disabled="
                                                                !(
                                                                    (item.status === '未开始' ||
                                                                        item.status === '待分发') &&
                                                                    item.myCreated
                                                                )
                                                            "
                              >删除
                            </a-button>

                            <a-popconfirm title="请确认是否提醒该工单相关人员？" @confirm="toRmind(item.id)" :disabled="!item.pmoOrNot">
                              <a-button type="primary" ghost size="small" class="btn-item" :disabled="!item.pmoOrNot">催办 </a-button>
                            </a-popconfirm>
                            <div @click="toggleCollapse(item.id)">
                              <!--                                                        <button type="link">-->
                              <!--                                                            -->
                              <!--                                                        </button>-->
                              <span style="color: #3875ff; cursor: pointer">{{
                                                                isActive(item.id) ? '收起' : '展开'
                              }}</span>
                              <DoubleLeftOutlined v-if="isActive(item.id)" class="active-icon" />
                              <DoubleRightOutlined v-else class="active-icon" />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <div style="background: rgba(56, 117, 255, 0.1)" :style="getBorder(item.status)">
                    <div class="title-border"></div>
                  </div>
                  <!--                           列表父工单-->
                  <div class="item-inner" :style="getBorder(item.status)">
                    <div class="item-content item-content1">
                      <div class="inner">
                        <div class="inner-title">工单编号：</div>
                        <div class="inner-msg" :title="item.areaName">{{ item.number }}</div>
                      </div>
                      <div class="inner">
                        <div class="inner-title">所属环境：</div>
                        <div class="inner-msg">{{ item.environment }}</div>
                      </div>
                      <div class="inner">
                        <div class="inner-title">PMO：</div>
                        <div class="inner-msg">{{ item.pmo }}</div>
                      </div>
                    </div>
                    <div class="item-content item-content2">
                      <div class="inner">
                        <div class="inner-title">所属区域：</div>
                        <div class="inner-msg" :title="item.areaName">{{ item.areaName }}</div>
                      </div>
                      <div class="inner">
                        <div class="inner-title">所属产品：</div>
                        <div class="inner-msg" :item="item.production">{{
                                                    item.production
                        }}</div>
                      </div>
                      <div class="inner">
                        <div class="inner-title">计划完成时间：</div>
                        <div class="inner-msg">{{ item.endTime }}</div>
                      </div>
                    </div>
                    <div class="item-content item-content3">
                      <div class="inner">
                        <div class="inner-title">所属客户：</div>
                        <div class="inner-msg" :title="item.customer">{{ item.customer }}</div>
                      </div>
                      <div class="inner">
                        <div class="inner-title">版本：</div>
                        <div class="inner-msg" :title="item.version">{{ item.version }}</div>
                      </div>
                      <div class="inner">
                        <div class="inner-title">实际完成时间：</div>
                        <div class="inner-msg">{{ item.finishTime }}</div>
                      </div>
                    </div>
                    <div class="item-content item-content4">
                      <div class="inner">
                        <div class="inner-title">所属项目：</div>
                        <div class="inner-msg" :title="item.projectName">{{
                                                    item.projectName
                        }}</div>
                      </div>
                      <div class="inner">
                        <div class="inner-title">项目经理：</div>
                        <div class="inner-msg">{{ item.pmName }}</div>
                      </div>
                    </div>
                  </div>

                  <!--                           列表父工单-->
                  <!--                         子工单-->
                  <div class="collapse-bottom" v-if="item.subWorkOrderDtoList && item.subWorkOrderDtoList.length > 0">
                    <div class="item-children" v-for="(child, index) in item.subWorkOrderDtoList" :key="index">
                      <div class="child-title">
                        <div class="child-title-left">
                          <div class="gd-title">{{ child.content }}</div>
                        </div>
                        <div class="collapse-title-right">
                          <div class="border-div">
                            <span class="collapse-title-font">创建人：</span>
                            <span class="collapse-content-font">{{ child.createdBy }}</span>
                            <div class="border-line"></div>
                          </div>
                          <div class="border-div">
                            <span class="collapse-title-font">创建时间：</span>
                            <span class="collapse-content-font">{{
                                                            child.createdTime
                            }}</span>
                            <div class="border-line"></div>
                          </div>
                          <div class="border-div">
                            <span class="collapse-title-font">状态：</span>
                            <span class="collapse-content-font">{{ child.status }}</span>
                          </div>
                          <div class="collapse-title-right-btn">
                            <a-button type="primary" ghost size="small" class="btn-item" @click="showCirculation(child)" :disabled="isCirculationDisabled(child)">流转 </a-button>
                            <a-button type="primary" ghost size="small" class="btn-item" @click="showResolving(child)" :disabled="isResolvingDisabled(child)">解决中 </a-button>
                            <a-button type="primary" ghost size="small" class="btn-item" @click="showResolved(child)" :disabled="isResolvedDisabled(child)">已解决 </a-button>
                            <a-button type="primary" ghost size="small" class="btn-item" @click="handleSonDetail(child.id)">详情 </a-button>
                            <a-button type="primary" ghost size="small" class="btn-item" @click="editSon(child)" :disabled="!child.myCreated">编辑 </a-button>
                            <a-button
                              type="primary"
                              ghost
                              size="small"
                              class="btn-item"
                              :disabled="
                                                                !(
                                                                    (child.status === '未开始' ||
                                                                        child.status === '待分发') &&
                                                                    child.myCreated
                                                                )
                                                            "
                              @click="toDelete(child)"
                              >删除
                            </a-button>

                            <a-popconfirm title="请确认是否提醒该工单相关人员？" @confirm="toRmind(child.id)" :disabled="!child.pmoOrNot">
                              <a-button type="primary" ghost size="small" class="btn-item" :disabled="!child.pmoOrNot"> 催办 </a-button>
                            </a-popconfirm>
                          </div>
                        </div>
                      </div>
                      <div class="child-inner">
                        <div class="child-content">
                          <div class="inner-main">
                            <div class="border-line"></div>
                            <span class="inner-title">工单编号：</span>
                            <div class="inner-msg">{{ child.number }}</div>
                          </div>
                        </div>
                        <div class="child-content">
                          <div class="inner-main">
                            <div class="border-line"></div>
                            <span class="inner-title">解决人：</span>
                            <div class="inner-msg">{{ child.solver }}</div>
                          </div>
                        </div>
                        <div class="child-content">
                          <div class="inner-main">
                            <div class="border-line"></div>
                            <span class="inner-title">计划解决时间：</span>
                            <div class="inner-msg">{{ child.endTime }}</div>
                          </div>
                        </div>
                        <div class="child-content">
                          <div class="inner-main">
                            <span class="inner-title">实际解决时间：</span>
                            <div class="inner-msg">{{ child.finishTime }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!--                         子工单-->
                </a-collapse-panel>
              </a-collapse>
            </div>
          </div>
        </a-spin>
      </div>
      <div class="pagination-div">
        <a-pagination
          v-model:current="pagination.current"
          :total="pagination.total"
          :show-total="pagination.showTotal"
          :page-size="pagination.pageSize"
          show-quick-jumper
          @show-size-change="pageSizeChange"
          @change="pageChange"
        />
      </div>
      <!-- end vid_56q5auz3n0 自定义模板_9naw5vucd4 -->
      <!-- begin vid_qm6uj3uc2d 图片_oyechqv0p3 -->
      <al-image
        v-if="false"
        class="vid_qm6uj3uc2d"
        :emptyImgSrc="''"
        :src="vid_qm6uj3uc2d_props.src"
      />
      <!-- end vid_qm6uj3uc2d 图片_oyechqv0p3 -->
      <!-- begin vid_wvjq4lo2yf 图片_iaiexyrfqt -->
      <al-image
        v-if="false"
        class="vid_wvjq4lo2yf"
        :emptyImgSrc="''"
        :src="vid_wvjq4lo2yf_props.src"
      />
      <!-- end vid_wvjq4lo2yf 图片_iaiexyrfqt -->
      <!-- begin vid_wby2nignvk 图片_czm1uqu1ms -->
      <al-image
        v-if="false"
        class="vid_wby2nignvk"
        :emptyImgSrc="''"
        :src="vid_wby2nignvk_props.src"
      />
      <!-- end vid_wby2nignvk 图片_czm1uqu1ms -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
    import colorTheme from '@/design/custom-theme.json';
    
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    import { useSystemStore } from "@/store/modules/system";
    const systemStore = useSystemStore();
    



      // 获取传入的流程ID和组件参数
      const props = defineProps({
            'processInstanceId': {
            type: [String,Number,Boolean],
            default: undefined,
        },
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });
      const authInfo = localGet('app-user-store');
// 图片 http://10.40.0.33:9001/file-storage/469958199879835648.png
import vid_qm6uj3uc2d_imageUrl from '@/assets/images/bc1c82b4fa4aaaa874b82366c4085ba9.png'

    const vid_qm6uj3uc2d_props = reactive({
          src: vid_qm6uj3uc2d_imageUrl,
  })
// 图片 http://10.40.0.33:9001/file-storage/469958216751423488.png
import vid_wvjq4lo2yf_imageUrl from '@/assets/images/43fca83676c37713cbd01c392ff72994.png'

    const vid_wvjq4lo2yf_props = reactive({
          src: vid_wvjq4lo2yf_imageUrl,
  })
// 图片 http://10.40.0.33:9001/file-storage/469958229367889920.png
import vid_wby2nignvk_imageUrl from '@/assets/images/a54f37fd004a053655d654931e3f7230.png'

    const vid_wby2nignvk_props = reactive({
          src: vid_wby2nignvk_imageUrl,
  })



      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */


  /* ========================== 页面数据 ========================== */



  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  // 用于参数变更后重新执行自定义指令
      const queryUpdateFlag = ref(0);
      onMounted(() => { ;

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
  //     富文本设置
      import { nextTick } from 'vue'
      onMounted(() => {
          const urlParams = new URLSearchParams(window.location.search)
          // 获取单个参数
          state.filter.keyWords = urlParams.get('name')
          getAllUser()
          getPmName()
          getPmo()
          getData()
          getAreaList()
          getCustomerList()
          getProjectList()
      })
      const dataLoading = ref(false)
      import { QuillEditor, Quill } from '@vueup/vue-quill'
      import ImageUploader from 'quill-image-uploader'
      import '@vueup/vue-quill/dist/vue-quill.snow.css'
      const titleConfig = [
          { Choice: ' .ql-bold', title: '加粗' },
          { Choice: ' .ql-italic', title: '斜体' },
          { Choice: ' .ql-underline', title: '下划线' },
          { Choice: ' .ql-strike', title: '删除线' },
          { Choice: ' .ql-blockquote', title: '块引用' },
          { Choice: ' .ql-code-block', title: '插入代码' },
          { Choice: ' .ql-size', title: '字体大小' },
          { Choice: ' .ql-size', title: '字体大小' },
          { Choice: ' .ql-color', title: '字体颜色' },
          { Choice: ' .ql-background', title: '字体背景颜色' },
          { Choice: ' .ql-list[value="ordered"]', title: '有序列表' },
          { Choice: ' .ql-list[value="bullet"]', title: '无序列表' },
          { Choice: ' .ql-header[value="1"]', title: '1级标题' },
          { Choice: ' .ql-header[value="2"]', title: '2级标题' },
          { Choice: ' .ql-align', title: '对齐方式' },
          { Choice: ' .ql-clean', title: '清除字体格式' },
          { Choice: ' .ql-image', title: '图像' },
          { Choice: ' .ql-size .ql-picker-item[data-value="small"]', title: '小号' },
          { Choice: ' .ql-size .ql-picker-item[data-value="large"]', title: '大号' },
          { Choice: ' .ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
          { Choice: ' .ql-size .ql-picker-item:nth-child(2)', title: '标准' },
          { Choice: ' .ql-align .ql-picker-item:first-child', title: '居左对齐' },
          { Choice: ' .ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
          { Choice: ' .ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
          { Choice: ' .ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
      ]
      // 注册图片上传模块
      Quill.register('modules/imageUploader', ImageUploader)

      // 将本地文件转换为URL
      const getLocalImageURL = file => {
          return new Promise(resolve => {
              const reader = new FileReader()
              reader.onload = e => {
                  resolve(e.target.result)
              }
              reader.readAsDataURL(file)
          })
      }

      // 表单数据

      // Quill 编辑器选项
      const editorOption = ref({
          modules: {
              // imageUploader: {
              //     upload: async file => {
              //         const localUrl = await getLocalImageURL(file)
              //         return localUrl // 返回本地图片的 URL 进行预览
              //     }
              // },
              toolbar: [
                  ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
                  ['blockquote', 'code-block'], // 引用，代码块
                  [{ header: 1 }, { header: 2 }], // 标题1，标题2
                  [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
                  [{ size: ['small', false, 'large', 'huge'] }], // 文字大小
                  [{ color: [] }, { background: [] }], // 字体颜色，背景颜色
                  [{ align: [] }], // 对齐
                  ['clean'], // 清除格式
                  ['image'] // 链接，图片，视频
              ]
              // ImageUploader: imageHandler
          }
      })

      // 将 dataURL 转换为 File 对象的辅助函数
      const dataURLtoFile = (dataurl, filename) => {
          const arr = dataurl.split(',')
          const mime = arr[0].match(/:(.*?);/)[1]
          const bstr = atob(arr[1])
          let n = bstr.length
          const u8arr = new Uint8Array(n)
          while (n--) {
              u8arr[n] = bstr.charCodeAt(n)
          }
          return new File([u8arr], filename, { type: mime })
      }

      function initTitle() {
          document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
          for (let item of titleConfig) {
              let tip = document.querySelector('.ql-toolbar' + item.Choice)
              if (!tip) continue
              tip.setAttribute('title', item.title)
          }
      }
      //     富文本设置
      const pageSizeChange = (current, size) => {
          pagination.value.current = current
          pagination.value.pageSize = size
          getData()
      }
      const pageChange = (page, pageSize) => {
          pagination.value.current = page
          pagination.value.pageSize = pageSize
          getData()
      }
      const pagination = ref({
          current: 1,
          pageSize: 10,
          showSizeChanger: true,
          total: 0,
          pageSizeOptions: ['20', '40', '60', '80', '100'],
          showTotal: total => `共 ${total} 个项目 第 ${pagination.value.current}/${Math.ceil(total / pagination.value.pageSize)}页`
      })
      // const activeKey = ref('全部工单')
      const state = reactive({
          filter: {
              type: undefined,
              priority: undefined,
              questionSource: undefined,
              status: '',
              timeout: undefined,
              keyWords: undefined,
              number: undefined,
              factoryCode: undefined,
              production: undefined,
              pmName: undefined,
              pmoName: undefined,
              environment: undefined,
              createdByName: undefined,
              solverName: undefined,
              factoryType: undefined,
              createdTimeList: []
          },
          activeKey: "''",
          treeData: [],
          statusList: [
              {
                  label: '未开始',
                  value: '未开始'
              },
              {
                  label: '解决中',
                  value: '解决中'
              },
              {
                  label: '已解决',
                  value: '已解决'
              },
              {
                  label: '已关闭',
                  value: '已关闭'
              },
              {
                  label: '已回访',
                  value: '已回访'
              }
          ],
          changeStausList: [
              {
                  label: '正在处理',
                  value: '正在处理'
              },
              {
                  label: '已解决',
                  value: '已解决'
              },
              {
                  label: '无需解决',
                  value: '无需解决'
              },
              {
                  label: '申请流转',
                  value: '申请流转'
              }
          ],
          changeHaveSonStausList: [],
          sortList: [
              {
                  label: '工单类型正序',
                  value: 'type-asc'
              },
              {
                  label: '工单类型倒序',
                  value: 'type-desc'
              },
              {
                  label: '优先级正序',
                  value: 'priority-asc'
              },
              {
                  label: '优先级倒序',
                  value: 'priority-desc'
              },
              {
                  label: '工单状态正序',
                  value: 'status-asc'
              },
              {
                  label: '工单状态倒序',
                  value: 'status-desc'
              },
              {
                  label: '工单解决进度正序',
                  value: 'progress-asc'
              },
              {
                  label: '工单解决进度倒序',
                  value: 'progress-desc'
              },
              {
                  label: '所属区域正序',
                  value: 'area_code-asc'
              },
              {
                  label: '所属区域倒序',
                  value: 'area_code-desc'
              },
              {
                  label: '所属项目阶段正序',
                  value: 'milepost_id-asc'
              },
              {
                  label: '所属项目阶段倒序',
                  value: 'milepost_id-desc'
              },
              {
                  label: '所属客户正序',
                  value: 'customer-asc'
              },
              {
                  label: '所属客户倒序',
                  value: 'customer-desc'
              },
              {
                  label: '所属产品正序',
                  value: 'production-asc'
              },
              {
                  label: '所属产品倒序',
                  value: 'production-desc'
              },
              {
                  label: '所属环境正序',
                  value: 'environment-asc'
              },
              {
                  label: '所属环境倒序',
                  value: 'environment-desc'
              },
              {
                  label: '创建人正序',
                  value: 'created_by-asc'
              },
              {
                  label: '创建人倒序',
                  value: 'created_by-desc'
              },
              {
                  label: '创建时间正序',
                  value: 'created_time-asc'
              },
              {
                  label: '创建时间倒序',
                  value: 'created_time-desc'
              },
              {
                  label: '解决人正序',
                  value: 'solver-asc'
              },
              {
                  label: '解决人倒序',
                  value: 'solver-desc'
              },
              {
                  label: '计划完成时间正序',
                  value: 'end_time-asc'
              },
              {
                  label: '计划完成时间倒序',
                  value: 'end_time-desc'
              },
              {
                  label: '实际完成时间正序',
                  value: 'finish_time-asc'
              },
              {
                  label: '实际完成时间倒序',
                  value: 'finish_time-desc'
              }
          ],
          dataList: [],
          sort: 'created_time-desc',
          collapseKey: [],
          addOrEditVisible: false,
          modalTitle: '',
          modalForm: {
              content: undefined,
              type: undefined,
              priority: undefined,
              questionSource: undefined,
              workHours: undefined,
              endTime: undefined,
              areaCode: undefined,
              projectId: undefined,
              version: undefined,
              customer: undefined,
              production: undefined,
              environment: undefined,
              description: undefined,
              solverList: [],
              descriptionAttachmentList: [],
              qillData: ''
          },
          fatherLoading: false,
          sonLoading: false,
          editSonVisible: false,
          sonForm: {
              content: undefined,
              type: undefined,
              priority: undefined,
              questionSource: undefined,
              workHours: undefined,
              endTime: undefined,
              areaCode: undefined,
              projectId: undefined,
              version: undefined,
              customer: undefined,
              production: undefined,
              environment: undefined,
              description: undefined,
              solverList: [],
              descriptionAttachmentList: [],
              quillData: ''
          },
          deleteLoading: false,
          fileList: [
              {
                  id: 1
              }
          ],
          fileVisible: false,
          remarkVisible: false,
          remarks: '',
          changeHaveSonStatusVisible: false,
          changeStatusForm: {
              status: undefined,
              reason: '',
              attachmentList: [],
              workOrderId: undefined,
              solution: undefined
          },

          deleteVisible: false,
          areaList: [],
          projectList: [],
          milepostList: [],
          customList: [],
          environmentList: [],
          searchEnvironmentList: [],
          productList: [
              {
                  label: '大模型平台',
                  value: '大模型平台'
              },
              {
                  label: '水泥配料',
                  value: '水泥配料'
              },
              {
                  label: '其他',
                  value: '其他'
              }
          ],
          allUser: [],
          pmoList: [],
          pmNameList: [],
          previewImage: '',
          previewVisible: false
      })
      function getPmo() {
          get('/solution-ppm/api/v2/built-in-system-ppm/work_order/role/search/PMO').then(data => {
              state.pmoList = data.data.map(item => {
                  return {
                      label: item,
                      value: item
                  }
              })
          })
      }
      function getPmName() {
          get('/solution-ppm/api/v2/built-in-system-ppm/work_order/role/search/PM').then(data => {
              state.pmNameList = data.data.map(item => {
                  return {
                      label: item,
                      value: item
                  }
              })
          })
      }
      // 获取环境
      function getEnvironmentList() {
          let customerId = state.customList.find(item => item.name === state.modalForm.customer)?.id
          console.log(customerId)
          get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/env?customerId=${customerId ? customerId : ''}`).then(
              data => {
                  state.environmentList = data.data
              }
          )
      }
      // 获取筛选环境
      function getSearchEnvironmentList() {
          get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/env_distinct`).then(data => {
              state.searchEnvironmentList = data.data
          })
      }
      // 获取产品
      // 产品
      function getProductList() {
          let envId = state.environmentList.find(item => item.name === state.modalForm.environment)?.id
          get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/product?envId=${envId ? envId : ''}`).then(data => {
              state.productList = data.data
          })
      }
      // 获取版本
      function getVersionList() {
          let envId = state.environmentList.find(item => item.name === state.modalForm.environment)?.id
          let productId = state.productList.find(item => item.name === state.modalForm.production)?.id
          get(
              `/solution-ppm/api/v2/built-in-system-ppm/work_order/version?envId=${envId ? envId : ''}&productId=${
                  productId ? productId : ''
              }`
          ).then(data => {
              state.modalForm.version = data.data
          })
      }
      // 客户改变如果没有选区域自动带区域
      function customerChange() {
          let arae = state.customList.find(item => item.name === state.modalForm.customer)
          if (arae) {
              state.modalForm.areaCode = arae.areaCode
          }
      }
      // 区域变
      function areaChange() {
          state.modalForm.customer =
              state.modalForm.projectId =
              state.modalForm.environment =
              state.modalForm.production =
              state.modalForm.version =
                  undefined
      }
      // 项目变
      function projectChange() {
          state.modalForm.environment = state.modalForm.production = state.modalForm.version = undefined
      }
      // 环境变
      function environmentChange() {
          state.modalForm.production = state.modalForm.version = undefined
      }
      // 产品变
      function productChange() {
          state.modalForm.version = undefined
          getVersionList()
      }
      //     跳父详情
      function handleDetail(id) {
          window.open(`${import.meta.env.VITE_PUBLIC_PATH}/page/3000000785?id=${id}`, '_blank')
          // router.push(`${import.meta.env.VITE_PUBLIC_PATH}/page/3000000785?id=${id}`)
      }
      // 跳子详情
      function handleSonDetail(id) {
          window.open(`${import.meta.env.VITE_PUBLIC_PATH}/page/3000000787?id=${id}&url=3000000784`, '_blank')
          // router.push(`${import.meta.env.VITE_PUBLIC_PATH}/page/3000000787?id=${id}&url=3000000784`)
      }
      //     跳审批
      function handelApprove() {
          router.push(`${import.meta.env.VITE_PUBLIC_PATH}/page/3000000788`)
      }
      const currentData = ref({})
      //     新建工单
      function handleAdd() {
          resetCurrentData()
          getPopleList()
          state.addOrEditVisible = true
          state.modalTitle = '新建工单'

          nextTick(() => {
              initTitle()
              quillEditor.value.setContents('')
          })
      }
      function getTreeData() {
          get('/solution-ppm/api/v2/built-in-system-ppm/work_order/tree/search').then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              state.treeData = data.data
          })
      }
      // 获取类型
      function handleTreeChange(value, label, extra) {
          if (value && extra) {
              const selectedNode = extra.triggerNode.props // 获取选中的节点
              if (selectedNode) {
                  const type = selectedNode.nodeType // 获取type字段
                  // 将type字段传递给后端
                  if (type) {
                      state.filter.factoryType = type
                  }
              }
          } else {
              state.filter.factoryType = undefined
          }
      }
      //     编辑工单
      async function handleEdit(record) {
          await resetCurrentData()
          currentData.value = record
          await Object.assign(state.modalForm, record)

          // 按顺序调用函数
          await getCustomerList() // 获取客户列表
          await getProjectList() // 获取项目列表
          await getEnvironmentList() // 获取环境列表
          await getProductList() // 获取产品列表

          // 显示模态框
          state.addOrEditVisible = true

          // 使用 nextTick 确保 DOM 更新后再执行
          nextTick(() => {
              get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/details/${record.id}`).then(data => {
                  let descriptionData = JSON.parse(data.data.workOrderDto.description)
                  quillEditor.value.setContents(descriptionData)
              })
          })

          state.modalTitle = '编辑工单'
      }

      // 区域
      function getAreaList() {
          get('/solution-ppm/api/v2/built-in-system-ppm/work_order/area_info').then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              state.areaList = data.data.map(item => {
                  return {
                      label: item.areaName,
                      value: item.areaCode
                  }
              })
          })
      }
      // 项目
      function getProjectList() {
          if (state.modalForm.areaCode) {
              get(
                  `/solution-ppm/api/v2//built-in-system-ppm/work_order/project_by_area_code/${state.modalForm.areaCode}`
              ).then(data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  }
                  state.projectList = data.data
              })
          } else {
              get(`/solution-ppm/api/v2//built-in-system-ppm/work_order/project_by_area_code/0`).then(data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  }
                  state.projectList = data.data
              })
          }
      }
      function getCustomerList() {
          get(
              `/solution-ppm/api/v2/built-in-system-ppm/work_order/customer?areaCode=${
                  state.modalForm.areaCode ? state.modalForm.areaCode : ''
              }`
          ).then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              state.customList = data.data
          })
      }

      //     父工单提交表单
      function submit() {
          formRef.value.validate().then(async () => {
              state.fatherLoading = true
              const deltaContent = quillEditor.value.getContents()

              const imageUploadPromises = []

              deltaContent.ops.forEach(op => {
                  if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
                      const localSrc = op.insert.image

                      // 如果是 base64 图片，上传并替换为 URL
                      const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

                      const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
                          // 替换 op 中的 base64 URL 为服务器返回的 URL
                          op.insert.image = fullUrl
                      })

                      imageUploadPromises.push(uploadPromise)
                  }
              })
              try {
                  await Promise.all(imageUploadPromises)
                  if (currentData.value.id) {
                      // 编辑保存逻辑
                      const params = { ...state.modalForm }
                      params.description = JSON.stringify(deltaContent)
                      put('/solution-ppm/api/v2/built-in-system-ppm/work_order', params)
                          .then(data => {
                              if (data.code !== 200) {
                                  message.error(data.message)
                                  return
                              }
                              message.success(data.message)
                              state.addOrEditVisible = false
                              resetFather()
                              getData()
                          })
                          .finally(() => {
                              state.fatherLoading = false
                          })
                  } else {
                      // 新建保存逻辑
                      const params = { ...state.modalForm }
                      params.description = JSON.stringify(deltaContent)
                      post('/solution-ppm/api/v2/built-in-system-ppm/work_order', params)
                          .then(data => {
                              if (data.code !== 200) {
                                  message.error(data.message)
                                  return
                              }
                              message.success(data.message)
                              state.addOrEditVisible = false
                              resetFather()
                              getData()
                          })
                          .finally(() => {
                              state.fatherLoading = false
                          })
                  }
              } catch (error) {
                  state.fatherLoading = false
                  console.error('图片上传失败', error)
                  return // 终止提交
              }
          })
      }
      function fatherCancel() {
          state.addOrEditVisible = false
          resetFather()
      }
      function resetFather() {
          state.modalForm = {
              content: undefined,
              type: undefined,
              priority: undefined,
              questionSource: undefined,
              workHours: undefined,
              endTime: undefined,
              areaCode: undefined,
              projectId: undefined,
              version: undefined,
              customer: undefined,
              production: undefined,
              environment: undefined,
              description: undefined,
              solverList: [],
              fileList: [],
              qillData: ''
          }
      }
      function resetSon() {
          state.sonForm = {
              content: undefined,
              type: undefined,
              priority: undefined,
              questionSource: undefined,
              workHours: undefined,
              endTime: undefined,
              areaCode: undefined,
              projectId: undefined,
              version: undefined,
              customer: undefined,
              production: undefined,
              environment: undefined,
              description: undefined,
              solverList: [],
              fileList: [],
              quillData: ''
          }
      }
      const formRef = ref(null)
      // 上传API
      const uploadFileAPI = async file => {
          const data = new FormData()
          data.append('file', file)

          return post('/file-storage/api/v1/file/upload', data)
              .then(({ data: { fullUrl } }) => {
                  return { data: { fullUrl } }
              })
              .catch(error => {
                  console.error('上传图片出错:', error)
                  throw error // 抛出错误以供外部处理
              })
      }

      //     子工单编辑
      function editSon(record) {
          resetCurrentData()
          currentData.value = record
          state.editSonVisible = true
          Object.assign(state.sonForm, record)
          nextTick(() => {
              get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/details/${record.id}`).then(data => {
                  let descriptionData = JSON.parse(data.data.workOrderDto.description)
                  sonQuillRef.value.setContents(descriptionData)
              })
          })
      }
      const sonRef = ref(null)
      //     子工单编辑保存
      function submitSon() {
          state.sonLoading = true
          sonRef.value.validate().then(async () => {
              const deltaContent = sonQuillRef.value.getContents()
              const imageUploadPromises = []
              deltaContent.ops.forEach(op => {
                  if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
                      const localSrc = op.insert.image

                      // 如果是 base64 图片，上传并替换为 URL
                      const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

                      const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
                          // 替换 op 中的 base64 URL 为服务器返回的 URL
                          op.insert.image = fullUrl
                      })

                      imageUploadPromises.push(uploadPromise)
                  }
              })
              try {
                  await Promise.all(imageUploadPromises)

                  const params = { ...state.sonForm }
                  params.description = JSON.stringify(deltaContent)
                  put('/solution-ppm/api/v2/built-in-system-ppm/work_order', params)
                      .then(data => {
                          if (data.code !== 200) {
                              message.error(data.message)
                              return
                          }
                          message.success(data.message)
                          state.editSonVisible = false
                          resetSon()
                          getData()
                      })
                      .finally(() => {
                          state.sonLoading = false
                      })
              } catch (error) {
                  console.error('图片上传失败', error)
                  state.sonLoading = false
                  return // 终止提交
              }
          })
      }

      // 父上传文件
      function handlerFatherUpload(file) {
          state.fatherLoading = true
          const data = new FormData()
          data.append('file', file)

          post('/file-storage/api/v1/file/upload', data)
              .then(({ data: { fullUrl } }) => {
                  if (data) {
                      // 新文件对象
                      const newFile = {
                          uid: file.uid,
                          lastModified: file.lastModified,
                          name: file.name,
                          size: file.size,
                          type: file.type,
                          status: 'done',
                          url: fullUrl
                      }

                      // 去重，保留一个副本
                      state.modalForm.descriptionAttachmentList = [
                          // 保留已存在文件（去除重复）
                          ...state.modalForm.descriptionAttachmentList.filter(
                              item => item.uid !== file.uid && item.name !== file.name
                          ),
                          // 添加新的文件
                          newFile
                      ]
                  }
                  state.fatherLoading = false
              })
              .catch(e => {
                  message.error('上传失败' + e)
              })

          return false
      }
      // 父移除文件
      function handlerFatherRemove(file) {
          state.modalForm.descriptionAttachmentList = state.modalForm.descriptionAttachmentList.filter(
              item => item.uid !== file.uid
          )
      }
      // 父上传文件

      // 子上传附件
      function handlerSonUpload(file) {
          state.sonLoading = true
          const data = new FormData()
          data.append('file', file)

          post('/file-storage/api/v1/file/upload', data)
              .then(({ data: { fullUrl } }) => {
                  if (data) {
                      // 新文件对象
                      const newFile = {
                          uid: file.uid,
                          lastModified: file.lastModified,
                          name: file.name,
                          size: file.size,
                          type: file.type,
                          status: 'done',
                          url: fullUrl
                      }

                      // 去重，保留一个副本
                      state.sonForm.descriptionAttachmentList = [
                          // 保留已存在文件（去除重复）
                          ...state.sonForm.descriptionAttachmentList.attachmentList.filter(
                              item => item.uid !== file.uid && item.name !== file.name
                          ),
                          // 添加新的文件
                          newFile
                      ]
                  }
                  state.sonLoading = false
              })
              .catch(e => {
                  message.error('上传失败' + e)
              })

          return false
      }
      function handlerSonRemove(file) {
          state.sonForm.descriptionAttachmentList = state.sonForm.descriptionAttachmentList.filter(
              item => item.uid !== file.uid
          )
      }
      // 子上传附件

      function resetCurrentData() {
          currentData.value = {}
      }
      const quillEditor = ref(null) // 引用QuillEditor组件
      const sonQuillRef = ref(null) // 引用QuillEditor组件
      const taskPeopleList = ref([])
      function handlerAddPeople(name) {
          if (state.modalForm.solverList.indexOf(name) !== -1) {
              state.modalForm.solverList = state.modalForm.solverList.filter(item => item !== name)
          } else {
              state.modalForm.solverList[0] = name
          }
      }
      function handlerAddSonPeople(name) {
          if (state.sonForm.solverList.indexOf(name) !== -1) {
              state.sonForm.solverList = state.sonForm.solverList.filter(item => item !== name)
          } else {
              state.sonForm.solverList[0] = name
          }
      }
      function getPopleList() {
          get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/get_top_user`).then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              taskPeopleList.value = data.data.map(item => {
                  return {
                      label: item,
                      value: item
                  }
              })
          })
      }
      function getAllUser() {
          get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              state.allUser = data.data.userDtoList
          })
      }
      // 获取列表
      function getData(flag) {
          if (flag) {
              pagination.value.current = 1
          }
          dataLoading.value = true
          post('/solution-ppm/api/v2/built-in-system-ppm/work_order/search', {
              ...state.filter,
              pageSize: pagination.value.pageSize,
              pageNo: pagination.value.current,
              directionField: state.sort
          })
              .then(data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  }
                  state.dataList = data.data.content
                  pagination.value.total = data.data.totalElements
                  console.log('Total:', pagination.value.total) // 打印 total 确认是否正确
                  if (data.data.content.length > 0) {
                      state.collapseKey.push(state.dataList[0].id)
                  }
              })
              .finally(() => {
                  dataLoading.value = false
              })
      }
      function resetData() {
          state.filter = {
              type: undefined,
              priority: undefined,
              questionSource: undefined,
              status: state.filter.status,
              timeout: undefined,
              keyWords: undefined,
              number: undefined,
              factoryCode: undefined,
              production: undefined,
              pmName: undefined,
              pmoName: undefined,
              environment: undefined,
              createdByName: undefined,
              solverName: undefined,
              factoryType: undefined,
              createdTimeList: []
          }
          pagination.value.current = 1
          pagination.value.pageSize = 10
          getData()
      }

      //     计算解决时间
      function getSolveTime() {
          // 获取当前时间
          let currentDate = dayjs()
          let num = state.modalForm.workHours
          // 计算新时间
          let newDate = currentDate.add(num, 'hour')

          // 格式化新时间为 "YYYY-MM-DD HH:mm" 格式
          let formattedDate = newDate.format('YYYY-MM-DD HH:mm:ss')

          state.modalForm.endTime = formattedDate
      }
      function hanldeTypeChange() {
          if (state.modalForm.type === '产品需求') {
              state.modalForm.priority = 'p3'
              getSolveTimeByType('p3')
          } else {
              state.modalForm.priority = state.modalForm.endTime = state.modalForm.workHours = undefined
          }
      }
      //     根据类型获取解决时间
      function getSolveTimeByType(type) {
          let num = 0
          if (type == 'p0') {
              num = 2
              state.modalForm.workHours = 2
          } else if (type == 'p1') {
              num = 24
              state.modalForm.workHours = 24
          } else if (type == 'p2') {
              num = 48
              state.modalForm.workHours = 48
          } else if (type == 'p3') {
              num = 48
              state.modalForm.workHours = 336
          }
          getSolveTime()
      }
      function handlerDownload(item) {
          pageLoading.loading = true
          pageLoading.tip = '文件下载中...'
          fetch(item.url)
              .then(response => response.blob())
              .then(blob => {
                  const downloadLink = document.createElement('a')
                  const url = URL.createObjectURL(blob)
                  downloadLink.href = url
                  downloadLink.setAttribute('download', item.name)
                  downloadLink.style.display = 'none'
                  document.body.appendChild(downloadLink)
                  downloadLink.click()
                  document.body.removeChild(downloadLink)

                  // Release the object URL after the download
                  URL.revokeObjectURL(url)
                  pageLoading.loading = false
              })
              .catch(err => {
                  console.error('Download failed', err)
              })
      }

      function handleDelete() {
          state.deleteLoading = true
          del(`/solution-ppm/api/v2/built-in-system-ppm/work_order/${currentData.value.id}`)
              .then(data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  }
                  message.success(data.message)
                  state.deleteVisible = false
                  getData()
              })
              .finally(() => {
                  state.deleteLoading = false
              })
      }
      function toDelete(record) {
          resetCurrentData()
          currentData.value = record
          state.deleteVisible = true
      }
      //     预览图片
      function previewAttachment(item) {
          // 检查附件类型
          if (item.type.startsWith('image')) {
              state.previewImage = item.url // 设置预览图片的URL
              state.previewVisible = true // 显示模态框
          } else {
              // state.isImagePreview = false;
              // // 如果是其他类型的文件，直接在模态框中显示
              // state.previewFileUrl = item.url; // 设置预览文件的URL
              message.info('目前仅支持图片预览')
          }
      }
      //    新需求
      const newState = reactive({
          changeStatusLoading: false,
          isExpandAll: false,
          circulationVisible: false,
          resolvingVisible: false,
          resolvedVisible: false,
          circulationForm: {
              solverList: [],
              status: '流转'
          },
          resolvingForm: {
              solution: '',
              status: '解决中',
              solutionDetail: ''
          },
          resolvedForm: {
              solution: '',
              attachmentList: [],
              status: '已解决',
              solutionDetail: ''
          },
          closeForm: {
              status: '关闭'
          },
          workOrderId: undefined
      })
      const circulationFormRef = ref(null)
      const resolvingFormRef = ref(null)
      const resolvedFormRef = ref(null)
      const resolvingQuillRef = ref(null)
      const resolvedQuillRef = ref(null)
      //     全部展开
      function handleExpandAll() {
          newState.isExpandAll = true
          state.dataList.forEach(item => {
              state.collapseKey.push(item.id)
          })
      }
      //     全部折叠
      function handleCollapseAll() {
          newState.isExpandAll = false
          state.collapseKey = []
      }
      // 流转处理
      function confirmCirculation() {
          circulationFormRef.value.validate().then(() => {
              newState.changeStatusLoading = true
              newState.circulationForm.workOrderId = newState.workOrderId
              newState.circulationForm.status = '流转'
              put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', newState.circulationForm)
                  .then(data => {
                      if (data.code !== 200) {
                          message.error(data.message)
                          return
                      }
                      message.success(data.message)
                      cancelCirculation()
                      getData()
                  })
                  .finally(() => {
                      newState.changeStatusLoading = false
                      cancelCirculation()
                  })
          })
      }
      function cancelCirculation() {
          newState.circulationVisible = false
          newState.circulationForm = {
              solverList: [],
              status: '流转'
          }
      }
      // 解决中处理
      function confirmResolving() {
          newState.changeStatusLoading = true
          resolvingFormRef.value.validate().then(async () => {
              const deltaContent = resolvingQuillRef.value.getContents()

              const imageUploadPromises = []

              deltaContent.ops.forEach(op => {
                  if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
                      const localSrc = op.insert.image

                      // 如果是 base64 图片，上传并替换为 URL
                      const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

                      const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
                          // 替换 op 中的 base64 URL 为服务器返回的 URL
                          op.insert.image = fullUrl
                      })

                      imageUploadPromises.push(uploadPromise)
                  }
              })

              try {
                  await Promise.all(imageUploadPromises)

                  newState.resolvingForm.workOrderId = newState.workOrderId
                  newState.resolvingForm.solutionDetail = JSON.stringify(deltaContent)
                  put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', newState.resolvingForm)
                      .then(data => {
                          if (data.code !== 200) {
                              message.error(data.message)
                              return
                          }
                          message.success(data.message)
                          cancelResolving()
                          getData()
                      })
                      .finally(() => {
                          cancelResolving()
                          newState.changeStatusLoading = false
                      })
              } catch (error) {
                  newState.changeStatusLoading = false
                  console.error('图片上传失败', error)
                  return // 终止提交
              }
          })
      }
      function cancelResolving() {
          newState.resolvingVisible = false
      }
      // 已解决处理
      function confirmResolved() {
          newState.changeStatusLoading = true
          resolvedFormRef.value.validate().then(async () => {
              const deltaContent = resolvedQuillRef.value.getContents()

              const imageUploadPromises = []

              deltaContent.ops.forEach(op => {
                  if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
                      const localSrc = op.insert.image

                      // 如果是 base64 图片，上传并替换为 URL
                      const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

                      const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
                          // 替换 op 中的 base64 URL 为服务器返回的 URL
                          op.insert.image = fullUrl
                      })

                      imageUploadPromises.push(uploadPromise)
                  }
              })

              try {
                  await Promise.all(imageUploadPromises)

                  newState.resolvedForm.workOrderId = newState.workOrderId
                  newState.resolvedForm.status = '已解决'
                  newState.resolvedForm.solutionDetail = JSON.stringify(deltaContent)
                  put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', newState.resolvedForm)
                      .then(data => {
                          if (data.code !== 200) {
                              message.error(data.message)
                              return
                          }
                          message.success(data.message)
                          cancelResolved()
                          getData()
                      })
                      .finally(() => {
                          newState.changeStatusLoading = false
                          cancelResolved()
                      })
              } catch (error) {
                  newState.changeStatusLoading = false
                  console.error('图片上传失败', error)
                  return // 终止提交
              }
          })
      }
      function cancelResolved() {
          newState.resolvedVisible = false
      }
      function showCirculation(record) {
          newState.circulationVisible = true
          newState.workOrderId = record.id
      }
      function showResolving(record) {
          newState.workOrderId = record.id
          get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/details/${newState.workOrderId}`).then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              newState.resolvingVisible = true
              nextTick(() => {
                  let solutionDetail = JSON.parse(data.data.workOrderDto.solutionDetail)
                  newState.resolvingForm.solution = data.data.workOrderDto.solution
                  resolvingQuillRef.value.setContents(solutionDetail)
              })
          })
      }
      function showResolved(record) {
          newState.resolvedVisible = true
          newState.workOrderId = record.id
          get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/details/${newState.workOrderId}`).then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              nextTick(() => {
                  let solutionDetail = JSON.parse(data.data.workOrderDto.solutionDetail)
                  newState.resolvedForm.solution = data.data.workOrderDto.solution
                  newState.resolvedForm.attachmentList = data.data.workOrderDto.attachmentList
                  resolvedQuillRef.value.setContents(solutionDetail)
              })
          })
      }
      // 上传文件
      function handlerResolvedUpload(file) {
          newState.changeStatusLoading = true
          const data = new FormData()
          data.append('file', file)

          post('/file-storage/api/v1/file/upload', data)
              .then(({ data: { fullUrl } }) => {
                  if (data) {
                      // 新文件对象
                      const newFile = {
                          uid: file.uid,
                          lastModified: file.lastModified,
                          name: file.name,
                          size: file.size,
                          type: file.type,
                          status: 'done',
                          url: fullUrl
                      }

                      // 去重，保留一个副本
                      newState.resolvedForm.attachmentList = [
                          // 保留已存在文件（去除重复）
                          ...newState.resolvedForm.attachmentList.filter(
                              item => item.uid !== file.uid && item.name !== file.name
                          ),
                          // 添加新的文件
                          newFile
                      ]
                  }
                  newState.changeStatusLoading = false
              })
              .catch(e => {
                  message.error('上传失败' + e)
              })

          return false
      }
      // 移除文件
      function handlerResolvedRemove(file) {
          newState.resolvedForm.attachmentList = newState.resolvedForm.attachmentList.filter(
              item => item.uid !== file.uid
          )
      }
      const styleMap = {
          '未开始': {
              background: '#F6F6F6 !important',
              borderLeft: '2px solid #A9A9A9'
          },
          '待分发': {
              background: '#FFEADC !important',
              borderLeft: '2px solid #FFEADC'
          },
          '已解决': {
              background: '#EDF9E8 !important',
              borderLeft: '2px solid #52C41A'
          },
          '解决中': {
              background: '#EBF1FF  !important',
              borderLeft: '2px solid #3875FF'
          },
          '已关闭': {
              background: '#EBEBEB !important',
              borderLeft: '2px solid #262626'
          },
          '已回访': {
              background: '#EFE6FB !important',
              borderLeft: '2px solid #9254DE'
          }
      }

      // 获取样式
      function getTitleStyle(status) {
          return styleMap[status] || {}
      }
      const colorMap = {
          '未开始': { color: '#A9A9A9' },
          '已解决': { color: '#52C41A' },
          '解决中': { color: '#3875FF' },
          '已关闭': { color: '#262626' },
          '已回访': { color: '#9254DE' },
          '待分发': { color: '#FF7D27' }
      }
      function getColorStyle(status) {
          return colorMap[status] || '#262626'
      }
      const borderMap = {
          '未开始': { borderLeft: '2px solid #A9A9A9' },
          '已解决': { borderLeft: '2px solid #52C41A' },
          '解决中': { borderLeft: '2px solid #3875FF' },
          '已关闭': { borderLeft: '2px solid #262626' },
          '待分发': { borderLeft: '2px solid #FFEADC' }
      }
      function getBorder(status) {
          return borderMap[status] || {}
      }
      // 判断按钮是否可用的计算属性
      function isCirculationDisabled(item) {
          return !(
              (
                  (item.status === '未开始' && item.solvers) || // 未开始且有solvers
                  (item.status === '解决中' && item.solvers) || // 解决中且有solvers
                  (item.status === '待分发' && item.distributed)
              ) // 待分发且distributed为true
          )
      }

      function isResolvingDisabled(item) {
          return !(
              (item.status === '未开始' && item.solvers) ||
              (item.status === '已解决' && item.myCreated) ||
              (item.status === '已关闭' && item.myCreated) ||
              (item.status === '已关闭' && item.pmoOrNot)
          )
      }

      function isResolvedDisabled(item) {
          return (
              // !(item.status === '未开始' && item.solvers) && // 解决人解决中
              !(item.status === '解决中' && item.solvers)
          )
      }

      function isCloseDisabled(item) {
          return (
              !((item.status === '未开始' && item.solvers) || (item.status === '未开始' && item.myCreated)) &&
              !(item.status === '解决中' && item.solvers) &&
              !(item.status === '已解决' && item.myCreated) &&
              !(item.status === '待分发' && item.distributed)
          ) // 创建人或PMO关闭
      }

      function isReturnVisitDisabled(item) {
          return !(item.status === '已关闭' && (item.myCreated || item.pmoOrNot)) // 创建人或PMO回访
      }
      function handleReturnVisit(item) {
          const params = {
              workOrderId: item.id,
              status: '已回访'
          }
          newState.changeStatusLoading = true
          put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', params)
              .then(data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  }
                  message.success(data.message)
                  getData()
              })
              .finally(() => {
                  newState.changeStatusLoading = false
              })
      }
      function handlerClose(item) {
          const params = {
              workOrderId: item.id,
              status: '已关闭'
          }
          put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', params)
              .then(data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  }
                  message.success(data.message)
                  getData()
              })
              .finally(() => {
                  newState.changeStatusLoading = false
              })
      }
      function handlerReOpen(item) {
          const params = {
              workOrderId: item.id,
              status: '重新打开'
          }
          put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', params).then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              message.success(data.message)
              getData()
          })
      }
      // 提醒
      function toRmind(id) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/remind/${id}`).then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              message.success('已经向工单关联人员发送提醒解决通知')
          })
      }
      function toggleCollapse(id) {
          if (isActive(id)) {
              // 如果当前面板是展开的，移除它的 ID
              state.collapseKey = state.collapseKey.filter(key => key !== id)
          } else {
              // 否则，将它的 ID 添加到 collapseKey 中
              state.collapseKey.push(id)
          }
      }
      function isActive(id) {
          return state.collapseKey.includes(id) // 检查该 ID 是否在 collapseKey 中
      }
      // 多选框改成单选
      function changeStatusSolverChange(value) {
          // if (Array.isArray(value) && value.length > 1) {
          //     newState.circulationForm.solverList = [value[0]] // 只保留第一个选项
          // }
          if (Array.isArray(value)) {
              newState.circulationForm.solverList = [value[value.length - 1]] // 只保留最后一个选项
          } else {
              newState.circulationForm.solverList = [value] // 如果不是数组，说明只选中一个选项
          }
      }
      function fatherSolverChange(value) {
          // if (Array.isArray(value) && value.length > 1) {
          //     state.modalForm.solverList = [value[0]] // 只保留第一个选项
          // }
          if (Array.isArray(value)) {
              state.modalForm.solverList = [value[value.length - 1]] // 只保留最后一个选项
          } else {
              state.modalForm.solverList = [value] // 如果不是数组，说明只选中一个选项
          }
      }
      function sonSolverChange(value) {
          // if (Array.isArray(value) && value.length > 1) {
          //     state.sonForm.solverList = [value[0]] // 只保留第一个选项
          // }
          if (Array.isArray(value)) {
              state.sonForm.solverList = [value[value.length - 1]] // 只保留最后一个选项
          } else {
              state.sonForm.solverList = [value] // 如果不是数组，说明只选中一个选项
          }
      }
      //    新需求
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
   {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
  }
  .page_root :deep(.@{ant-prefix}-table)
   {
    flex: auto;
    overflow: auto;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }


  /*样式*/
      .page_root {
          overflow: hidden;
      }
      .body {
          height: 100%;
          background-color: #f0f2f5;
      }
      .top-search {
          height: 180px;
          margin-bottom: 16px;
          border-radius: 4px;
          display: flex;
          gap: 16px;
          justify-content: space-between;
      }
      .top-left {
          width: 100%;
          padding: 16px;
          background-color: #fff;
          border-radius: 4px;
      }
      .top-right {
          border-radius: 4px;
          background-color: #fff;
          padding: 20px 24px;
          padding-right: 36px;
      }
      .right-title {
          display: flex;
          margin-bottom: 8px;
      }
      .title-font {
          font-size: 14px;
          color: rgba(89, 89, 89, 0.65);
          letter-spacing: 0;
          text-align: center;
          font-weight: 400;
      }

      .top-search :deep(.ant3-col-6) {
          height: 32px;
      }
      .right-icon {
          display: flex;
      }
      .min-div,
      .left-icon {
          width: 40%;
          display: flex;
          gap: 8px;
      }
      .max-div,
      .right-icon {
          flex: 1;
      }
      .max-div {
          text-align: left;
      }

      .right-icon-content {
          flex: 1;
          display: flex;
          justify-content: space-between;
      }

      .ceycle0,
      .ceycle1,
      .ceycle2,
      .ceycle3 {
          width: 72px;
          height: 22px;
          color: #fff;
          text-align: center;
          line-height: 22px;
          font-weight: 600;
          border-radius: 2px;
      }
      .ceycle0 {
          background-color: #ff2a00;
      }
      .ceycle1 {
          background-color: #ffa940;
      }
      .ceycle2 {
          background-color: #ffa940;
      }
      .ceycle3 {
          background-color: #1890ff;
      }
      .ph-icon,
      .xc-icon,
      .zj-icon {
          width: 72px;
          height: 22px;
          color: #262626;
          text-align: center;
          line-height: 22px;
          font-weight: 600;
          background-color: #d6d6d6;
      }
      .tip {
          display: inline-block;
          width: 60px;
          position: absolute;
          bottom: -20px;
          left: -20px;
          text-align: center;
      }
      .main {
          background-color: #fff;
          height: 100%;
          border-radius: 4px;
          padding: 20px 24px;
          padding-top: 16px;
          position: relative;
      }
      .main-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
      }
      /*折叠面板样式*/

      :deep(.ant3-collapse-header) {
          padding: 0 !important;
          border: none !important;
          color: #262626 !important;
          background: rgba(56, 117, 255, 0.1);
      }

      :deep(.ant3-collapse-borderless > .ant3-collapse-item > .ant3-collapse-content > .ant3-collapse-content-box) {
          padding: 0 !important;
      }

      :deep(.ant3-collapse-item) {
          margin-bottom: 8px;
      }

      :deep(.ant3-collapse-icon-position-right > .ant3-collapse-item > .ant3-collapse-header) {
          border-radius: 4px;
          color: #3875ff;
          background: #f0f2f5;
          position: relative;
          border-radius: 4px 4px 0 0;
      }

      /*折叠面板样式*/
      .collapse-title {
          position: relative;
          width: 100%;
          display: flex;
          height: 86px;
          padding: 15px 24px;
          align-items: center;
          /* 如果需要保留左右两角的圆角，可以在这里添加 border-radius 样式 */
      }
      .title-border {
          border-bottom: 1px solid #d9d9d9;
      }
      .child-title {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: 10px 24px;
          position: relative;
          border-bottom: 1px solid #d9d9d9;
      }
      .child-title::before {
          content: '';
          position: absolute;
          top: -1px;
          left: -1px;
          width: 0;
          height: 0;
          border-right: 20px solid transparent; /* 控制三角形的大小和方向 */
          border-top: 20px solid #ffa940; /* 三角形的颜色 */
          border-top-left-radius: 4px;
      }
      .collapse-title-left {
          display: flex;
          flex-direction: column;
          width: 88px;
          height: 49px;
          justify-content: space-between;
          align-items: center;
          padding-right: 16px;
          border-right: 1px solid #d9d9d9;
      }
      .collapse-title-right {
          display: flex;
          align-items: center;
          gap: 16px;
      }

      .gd-title {
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 500;
      }
      .collapse-title-font,
      .inner-title {
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          text-align: right;
          font-weight: 400;
      }
      .border-div {
          position: relative;
      }
      .border-line {
          position: absolute;
          width: 1px;
          height: 14px;
          background-color: #a5a6a7;
          right: -10px;
          top: 50%;
          transform: translate(-50%, -50%);
      }
      .collapse-title-right-btn {
          display: flex;
          gap: 8px;
      }

      .btn-item {
          position: relative;
          cursor: pointer;
      }
      .border-btn {
          position: absolute;
          width: 1px;
          height: 14px;
          background-color: #3875ff;
          right: -9px;
          top: 50%;
          transform: translate(-50%, -50%);
      }
      .active-btn {
          position: absolute !important;
          right: 20px !important;
          top: 58px !important;
          color: #3875ff !important;
          transform: translate(-50%, -50%) !important;
          font-size: 16px !important;
          font-weight: 500;
      }
      .active-icon {
          color: #3875ff;
          transform: rotate(90deg);
      }
      .item-inner {
          display: flex;
          padding: 7px 0;
          background: #f6f6f6;
          border-radius: 0 0 4px 4px;
      }

      .item-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 7px 24px;
          border-right: 1px solid #d9d9d9;
          gap: 10px;
      }

      .item-content1,
      .item-content2,
      .item-content3,
      .item-content4 {
          flex: 1; /* 平分宽度 */
      }
      .item-content4 {
          justify-content: start;
      }
      .inner {
          display: flex;
          justify-content: space-between;
      }

      .inner-title {
          text-align: right;
          flex: 0 0 auto; /* 保持标题宽度 */
      }

      .inner-msg {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          flex: 1; /* 占用剩余空间 */
      }
      .inner-msg {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          height: 100%;
          flex: 1;
      }
      .inner-title {
          text-align: right;
      }
      .inner-main {
          display: flex;
          flex: 1;
      }
      .item-children {
          background: #f8f9fa;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          margin-bottom: 16px;
          height: 93px;
      }
      .collapse-bottom {
          padding: 16px;
          padding-bottom: 0;
          background-color: #fff; /* 确保背景色 */
      }

      .item-children .collapse-title {
          padding-right: 16px;
          border-bottom: 1px solid #d9d9d9;
      }
      .child-inner {
          padding: 16px;
          display: flex;
          align-items: center;
          gap: 32px;
      }
      .item-children .inner-main {
          position: relative;
      }
      .item-children .border-line {
          position: absolute;
          width: 1px;
          height: 14px;
          background-color: #a5a6a7;
          right: -16px;
          top: 50%;
          transform: translate(-50%, -50%);
      }
      .pagination-div {
          position: absolute;
          right: 30px;
          bottom: 0;
          padding: 10px;
          background: transparent; /* 可选：为背景添加颜色 */
      }
      .form-content :deep(.ant3-form-item-label) {
          width: 135px;
      }
      .form-content :deep(.ant3-input-number),
      :deep(.ant3-picker) {
          width: 100%;
      }
      :deep(.ql-toolbar) {
          background: #fafafa;
          border: 1px solid #d9d9d9;
          border-radius: 2px 2px 0 0;
      }
      :deep(.ql-blank) {
          min-height: 110px;
          background: #ffffff;
      }
      :deep(.ql-editor) {
          min-height: 110px;
          background: #ffffff;
      }
      .remarks-modal {
          background: #ffffff;
          border: 1px solid #d9d9d9;
          border-radius: 2px;
          height: 140px;
      }
      .change-status :deep(.ant3-form-item-label) {
          width: 110px;
      }
      .tip {
          font-weight: 800;
      }
      .father-right {
          max-width: 94%; /* 限制宽度 */
          flex: 1;
          display: flex;
          flex-direction: column;
          padding-left: 13px;
          justify-content: space-between;
      }
      .father-title {
          display: block; /* 确保其为块级元素 */
          max-width: 100%; /* 确保宽度有限制 */
          font-size: 16px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 500;
          white-space: nowrap; /* 禁止换行 */
          overflow: hidden; /* 隐藏溢出内容 */
          text-overflow: ellipsis; /* 显示省略号 */
      }
      .father-bottom {
          display: flex;
          align-items: end; /* 容器垂直底部对齐 */
          gap: 8px;
          justify-content: space-between;
      }
      .father-right-btn {
          display: flex;
          gap: 8px;
      }

      .father-bottom > * {
          align-self: flex-end; /* 内部元素底部对齐 */
      }
      .father-bottom-left {
          display: flex;
          gap: 16px;
      }
      .father-icon {
          font-size: 12px;
          color: #333333;
          position: relative;
          top: -1px;
          margin-right: 4px;
      }
      .father-bgc1 {
          display: inline-block;
          width: 13px;
          height: 13px;
          background-image: url('@/assets/images/68d97d0b6a6a7bb23a6bbb8516363eb5.png');
          background-size: cover;
          position: relative;
          top: 1px;
          margin-right: 4px;
      }
      .father-bgc2 {
          display: inline-block;
          width: 13px;
          height: 13px;
          background-image: url('@/assets/images/61458bc0242c7ccea3fe5789f4cf9d7d.png');
          background-size: cover;
          position: relative;
          top: 1px;
          margin-right: 4px;
      }
      .father-bgc3 {
          display: inline-block;
          width: 13px;
          height: 13px;
          background-image: url('@/assets/images/a4bbe8e98ecad9d199aa6aa19be60112.png');
          background-size: cover;
          position: relative;
          top: 1px;
          margin-right: 4px;
      }
      :deep(.ant3-collapse-item) {
          background: #ffffff;
      }
      .collapse-title-right .border-line {
          right: -8px;
      }
      .gd-scroll {
          overflow-y: auto;
          overflow-x: hidden;
          height: calc(100% - 335px);
      }
      .gd-item {
          margin-bottom: 24px;
      }
      .gd-item:last-child {
          margin-bottom: 5px;
      }
      .solution-div {
          background: rgba(56, 117, 255, 0.1);
          padding: 0 16px;
          padding-bottom: 16px;
      }
      .inner-solution {
          display: flex;
          justify-content: start;
      }
      .top-title {
          height: 16px;
          padding-left: 8px;
          border-left: 4px solid #3875ff;
          font-size: 16px;
          line-height: 16px;
          color: #262626;
          font-weight: 600;
      }
      .top-tip {
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          text-align: justify;
          font-weight: 400;
          background: rgba(250, 100, 0, 0.1);
          border: 1px solid #fa6400;
          border-radius: 2px;
          padding: 6px 16px;
          margin-right: 8px;
      }
      .description-tip {
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          text-align: center;
          font-weight: 400;
          background: rgba(250, 100, 0, 0.1);
          border: 1px solid #fa6400;
          border-radius: 2px;
          padding: 6px 16px;
          margin-bottom: 16px;
      }
      .tip-img {
          width: 16px;
          height: 16px;
          color: #fa6400;
      }
      .file-content {
          padding: 16px;
          color: #3875ff;
          cursor: pointer;
      }
      .form-content :deep(.ql-snow .ql-editor) img {
          width: 200px;
      }
      .change-status :deep(.ql-snow .ql-editor) img {
          width: 200px;
      }
      .collapse-content-font {
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 400;
      }
      .max-length {
          display: inline-block; /* 使得元素能够处理 overflow */
          max-width: 180px; /* 根据需要调整最大宽度 */
          overflow: hidden; /* 隐藏超出部分 */
          white-space: nowrap; /* 不换行 */
          text-overflow: ellipsis; /* 显示省略号 */
      }
      .timeout {
          position: absolute;
          right: 0;
          top: 0;
          width: 50px;
          height: 22px;
          background: #ffbfb3;
          border-radius: 0 4px 0 4px;
          color: #ff2a00;
          text-align: center;
      }
      :deep(
              .ant3-collapse .ant3-collapse-item-disabled > .ant3-collapse-header,
              .ant3-collapse .ant3-collapse-item-disabled
          ) {
          cursor: default;
      }
      .remove-icon :deep(.ant3-select-selection-item-remove) {
          display: none !important;
      }
</style>